<?php
use frontend\modules\yii2\widgets\layouts\markdown\Markdown;
use frontend\modules\yii2\widgets\layouts\example\Example;
use yii\bootstrap\Button;
use yii\bootstrap\ButtonDropdown;

$this->title = 'Button Dropdown Widget Yii-Bootstrap按钮式下拉菜单使用教程和样式展示';
$this->registerMetaTag([
    'name' => 'keywords',
    'content' => 'button,dropdown,Yii,bootstrap3,widget,使用教程,演示'
]);
$this->registerMetaTag([
    'name' => 'description',
    'content' => 'Yii的bootstrap系列小部件中Button Dropdown小部件的使用教程及演示'
]);
$this->registerMetaTag([
    'name' => 'author',
    'content' => 'chenzhiwei'
]);




$html = [
    "markdown0" => <<<M0
# ButtonDropdown按钮式下拉菜单小部件的使用
> Bootstrap官方文档：[按钮式下拉菜单](https://v3.bootcss.com/components/#btn-dropdowns)

把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。
M0,
    "example0" => [
        "html" => ButtonDropdown::widget([
            'label' => 'Action',
            'options' => ['class' => 'btn btn-success'],
            'dropdown' => [
                'items' => [
                    ['label' => 'DropdownA', 'url' => '#'],
                    ['label' => 'DropdownB', 'url' => '#'],
                ],
            ],
        ])
        ,
        "yii" => <<<EY0
echo \yii\bootstrap\ButtonDropdown::widget([
    'label' => 'Action',
    'options' => ['class' => 'btn btn-success'],
    'dropdown' => [
        'items' => [
            ['label' => 'DropdownA', 'url' => '#'],
            ['label' => 'DropdownB', 'url' => '#'],
        ],
    ],
]);
EY0,
        "bootstrap" => <<<EB0
<div class="btn-group">
    <button class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Action 
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="/" tabindex="-1">
                DropdownA
            </a>
        </li>
        <li>
            <a href="#" tabindex="-1">
                DropdownB
            </a>
        </li>
    </ul>
</div>
EB0
    ],
    "markdown1" => <<<M0
由上述代码量对比可见，越是复杂的设计，使用小部件就越方便，大家也可以定制自己的小部件以实现更复杂的功能；

## 分裂式下拉按钮
要想实现分裂式按钮，只需要在上述代码中加上`split`属性即可，举例如下：
M0,
    "example1" => [
        "html" =>
            ButtonDropdown::widget([
                'label' => 'Action',
                'split' => true,
                'options' => ['class' => 'btn btn-default'],
                'dropdown' => [
                    'items' => [
                        ['label' => 'DropdownA', 'url' => '#'],
                        ['label' => 'DropdownB', 'url' => '#'],
                    ],
                ],
            ])
        ,
        "yii" => <<<EY1
echo ButtonDropdown::widget([
    'label' => 'Action',
    'split' => true,
    'options' => ['class' => 'btn btn-default'],
    'dropdown' => [
        'items' => [
            [
                'label' => 'DropdownA', 
                'url' => '#'
            ],
            [
                'label' => 'DropdownB', 
                'url' => '#'
            ],
        ],
    ],
]);
EY1,
        "bootstrap" => <<<EB1
<div class="btn-group">
    <button class="btn btn-default">
        Action
    </button>
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#" tabindex="-1">
                DropdownA
            </a>
        </li>
        <li>
            <a href="#" tabindex="-1">
                DropdownB
            </a>
        </li>
    </ul>
</div>
EB1

    ],
    "markdown2" => <<<EM2
## 按钮尺寸
可以用`.btn-lg`，`.btn-sm`，`.btn-xs`类实现不同尺寸的控制，如下：
EM2
    ,
    "example2" => [
        "html" => ButtonDropdown::widget([
            'label' => 'Action',
            'options' => ['class' => 'btn btn-success btn-lg', 'style' => 'margin-right:10px;'],
            'dropdown' => [
                'items' => [
                    ['label' => 'DropdownA', 'url' => '#'],
                    ['label' => 'DropdownB', 'url' => '#'],
                ],
            ],
        ])
        .
        ButtonDropdown::widget([
            'label' => 'Action',
            'options' => ['class' => 'btn btn-success', 'style' => 'margin-right:10px;'],
            'dropdown' => [
                'items' => [
                    ['label' => 'DropdownA', 'url' => '#'],
                    ['label' => 'DropdownB', 'url' => '#'],
                ],
            ],
        ])
        .
        ButtonDropdown::widget([
            'label' => 'Action',
            'options' => ['class' => 'btn btn-success btn-sm', 'style' => 'margin-right:10px;'],
            'dropdown' => [
                'items' => [
                    ['label' => 'DropdownA', 'url' => '#'],
                    ['label' => 'DropdownB', 'url' => '#'],
                ],
            ],
        ])
        .
        ButtonDropdown::widget([
            'label' => 'Action',
            'options' => ['class' => 'btn btn-success btn-xs', 'style' => 'margin-right:10px;'],
            'dropdown' => [
                'items' => [
                    ['label' => 'DropdownA', 'url' => '#'],
                    ['label' => 'DropdownB', 'url' => '#'],
                ],
            ],
        ])
        ,
        "yii" => <<<EY0
echo \yii\bootstrap\ButtonDropdown::widget([
    'label' => 'Action',
    'options' => [
        'class' => 'btn btn-success btn-lg'
    ],
    'dropdown' => [
        'items' => [
            ['label' => 'DropdownA', 'url' => '#'],
            ['label' => 'DropdownB', 'url' => '#'],
        ],
    ],
]);
EY0,
        "bootstrap" => <<<EB0
<div class="btn-group">
    <button class="btn btn-success btn-lg dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Action 
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="/" tabindex="-1">
                DropdownA
            </a>
        </li>
        <li>
            <a href="#" tabindex="-1">
                DropdownB
            </a>
        </li>
    </ul>
</div>
EB0
    ],
    "markdown4" => <<<EM2
## 向上弹出菜单
可以用`.dropup`类实现下拉菜单朝上方打开方式，如下：
EM2
    ,
    "example4" => [
        "html" => ButtonDropdown::widget([
                'label' => 'Action',
                'containerOptions' => ['class' => 'dropup'],
                'options' => ['class' => 'btn btn-success'],
                'dropdown' => [
                    'items' => [
                        ['label' => 'DropdownA', 'url' => '#'],
                        ['label' => 'DropdownB', 'url' => '#'],
                    ],
                ],
            ])
        ,
        "yii" => <<<EY0
echo \yii\bootstrap\ButtonDropdown::widget([
    'label' => 'Action',
    'containerOptions' => ['class' => 'dropup'],
    'options' => [
        'class' => 'btn btn-success'
    ],
    'dropdown' => [
        'items' => [
            ['label' => 'DropdownA', 'url' => '#'],
            ['label' => 'DropdownB', 'url' => '#'],
        ],
    ],
]);
EY0,
        "bootstrap" => <<<EB0
<div class="dropup btn-group">
    <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
        Action 
        <span class="caret"></span>
    </button>
   
    <ul class="dropdown-menu">
        <li>
            <a href="#" tabindex="-1">
                DropdownA
            </a>
        </li>
        <li>
            <a href="#" tabindex="-1">
            DropdownB
            </a>
        </li>
    </ul>
</div>
EB0
    ],
    "markdown3" => <<<M3
大家可以看到，`.dropup`类需要添加到按钮的父元素中，因此就需要使用属性`containerOptions`完成渲染。
## Widget Api
### 父类及继承关系
![button group](/upload/articles/images/20210909151949.png)
### 属性
- `tagName`: string  
标签的类型，默认为`button`，不需要变动；
- `label`: string  
按钮上的文本信息；
- `containerOptions`: array  
最外层的div元素中属性列表，可以设置`.dropup`类向上展开列表，也可以定制`style`等自定义样式；
- `options`: array  
这个属性是给`button`元素用的，用于设置`button`元素的属性，比如说：按钮颜色、大小；  
- `dropdown`: array  
用于配置下拉列表项信息，如：
```php
echo ButtonDropdown::widget([
    'label' => 'Action',
    'dropdown' => [
        'items' => [
            ['label' => 'DropdownA', 'url' => '/'],
            ['label' => 'DropdownB', 'url' => '#'],
        ],
    ],
]);
```
`dropdown`会以参数的方式传递给`yii\bootstrap\Dropdown`这个小部件，由这个小部件完成列表的渲染；当然，你可以可以选择其他的小部件进行渲染，只需要改变这个`dropdownClass`属性值即可；  
- `dropdownClass`: string  
用于指定完成下拉列表样式渲染的类，一般我们选择`yii\bootstrap\Dropdown`这个小部件，由于`dropdown`这个属性的值会传递给本属性指定的类，因此如果要改变列表的外观样式，可以在`dropdown`中指定相关的css；
- `encodeLabels`: true/false  
如果label中出现html标签，此字段用于控制是否对其进行转换，比如说：
M3
    ,
    "example3" => [
        "html" =>
            Button::widget(["label" => "<div style='color:blue'>Encode Label</div>", "encodeLabel" => true, "options" => ["class" => "btn btn-success", "style" => "margin-right:10px"]]) .
            Button::widget(["label" => "<div style='color:blue'>Not Encode Label</div>", "encodeLabel" => false, "options" => ["class" => "btn btn-success"]])
        ,
        "yii" => <<<EY2
use \yii\bootstrap\Button;
echo Button::widget([
    "label" => "Encode Label", 
    "encodeLabel" => true, 
    "options" => [
        "class" => "btn btn-success"
   ]
]);
echo Button::widget([
    "label" => "Not Encode Label", 
    "encodeLabel" => false, 
    "options" => [
        "class" => "btn btn-success"
    ]
]);
EY2
        ,
        "bootstrap" => <<<EB2
<!-- encodeLabel = true -->
<button class="btn btn-success">
    &lt;div style='color:blue'&gt;Encode Label&lt;/div&gt;
</button>

<!-- encodeLabel = false -->
<button class="btn btn-success">
    <div style="color:blue">Not Encode Label</div>
</button>
EB2
    ]



];

foreach($html as $name => $item){
    switch ($name) {
        case strpos($name, "example") !== false:
            echo Example::widget($item);
            break;
        case strpos($name, "markdown") !== false:
            echo Markdown::widget(["content" => $item]);
            break;
        default:
            break;
    }
}